<template>
  <div class="body">
    <!-- 顶部背景图片 -->
    <MyBackground :token="token">
      <template #background></template>
    </MyBackground>
    <MyInfo :token="token" :username="username"></MyInfo>
    <MyGrid :token="token"></MyGrid>
    <!-- 广告 -->
    <MyAdvert :token="token">
      <template #advert></template>
    </MyAdvert>
  </div>
</template>

<script>
import MyInfo from '@/components/My/MyInfo'
import MyGrid from '@/components/My/MyGrid'
import MyAdvert from '@/components/My/MyAdvert'
import MyBackground from '@/components/My/MyBackground'

import { getToken } from '@/utils/storage'
import { getUser } from '@/api/my'

export default {
  name: 'MyContent',
  components: {
    MyInfo,
    MyGrid,
    MyAdvert,
    MyBackground
  },
  data () {
    return {
      token: '',
      username: ''
    }
  },
  async created () {
    this.token = getToken()
    const { body } = await getUser()
    this.username = body.nickname
  },
  methods: {}
}
</script>

<style scoped>
.body {
  position: relative;
}
.My_background {
  width: 100%;
}

</style>
